.right_title {
  font-size: 26rpx;
  line-height: 1.2;
  color: #262728;
  margin-right: 10rpx;
}

.common_search {
  padding: 20rpx 24rpx 0;
  margin-bottom: 30rpx;
  flex: none;

  .search_wrap {
    background-color: #fff;
    padding: 6rpx 4rpx 6rpx 24rpx;
    height: 76rpx;
    border-radius: 76rpx;
    display: flex;
    align-items: center;
    justify-content: center;


    .text {
      padding: 0 8rpx !important;
      font-size: 24rpx;
      line-height: 1.2;
      color: #606366;
    }

    .btn_wrap {
      color: #fff;
      font-size: 24rpx;
      line-height: 1.2;
      height: 64rpx;
      border-radius: 64rpx;
      background: linear-gradient(to bottom, #CEE5F2, #6DA4CD);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 180rpx;
      padding-left: 10rpx;

      &.active {
        background: linear-gradient(to bottom, #FFE8AA, #FFBA00);
      }
    }
  }
}

.history_wrap {
  padding: 0 24rpx;
  flex: none;
  margin-bottom: 8rpx;
  max-height: 220rpx;

  .scroll-Y {
    height: 100%;
    overflow: hidden;

    .history_list {
      align-items: center;
      justify-content: start;
      flex-wrap: wrap;

      .list_item {
        font-size: 24rpx;
        height: 46rpx;
        line-height: 46rpx;
        background: #E2F3FF;
        border-radius: 46rpx;
        padding: 0 32rpx;
        margin-right: 16rpx;
        margin-bottom: 16rpx;
        max-width: 100%;
        min-width: 150rpx;
        text-align: center;
      }
    }
  }
}

.history_btn {
  margin-bottom: 30rpx;

  .btn {
    font-size: 24rpx;
    line-height: 1.2;
    color: #606366;
    border-bottom: 1px solid #606366;
  }
}

.list_block {
  padding: 0;
  flex: 1;
  overflow: hidden;
  .scroll-Y {
    height: 100%;
    overflow: hidden;
  }
}

.empty_wrap {
  height: 100%;
  text-align: center;

  .empty {
    padding-top: 80rpx;

    .empty_img {
      width: 400rpx;
    }

    .empty_text {
      width: 100%;
      display: inline-block;
      text-align: center;
      font-size: 24rpx;
      line-height: 1.2;
      color: #606366;
    }
  }
}



// 列表展示
.list-wrapper {
  padding: 0 24rpx;
  padding-bottom: 20rpx;
  .list {
    margin-bottom: 16rpx;
    border-radius: 18rpx;
    overflow: hidden;
    background-color: #fff;
    box-shadow: -4px 3px 5px 0 #f1f1f1;
    .img {
      height: 395rpx;
      position: relative;
      width: 100%;
      .pic {
        width: 100%;
        height: 100%;
      }
      .right-person {
        position: absolute;
        right: 24rpx;
        top: 16rpx;
        padding: 0 16rpx;
        height: 52rpx;
        border-radius: 26rpx;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(4rpx);
        display: flex;
        align-items: center;
        max-width: 150rpx;
        text {
          color: #ff6a00;
          font-size: 20rpx;
          font-style: normal;
          font-weight: 400;
          margin-left: 6rpx;
        }
        .avatar {
          display: flex;
          align-items: center;
          position: relative;
          .bor {
            width: 34rpx;
            height: 34rpx;
            border-radius: 50%;
            border: 1px solid #fff;
            overflow: hidden;
            &:nth-child(2) {
              position: absolute;
              left: 17rpx;
            }
            &:nth-child(3) {
              left: 34rpx;
            }
            image {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
    .bottom-desc {
      padding: 0 16rpx;
      .desc-w {
        display: flex;
        align-items: center;
        margin-top: 14rpx;
        padding: 0 16rpx;
        .name {
          color: #262728;
          font-size: 32rpx;
          font-weight: 500;
          margin-right: 16rpx;
        }
        .rg-circle {
          display: flex;
          align-items: center;
          border: 4rpx solid #1da0fb;
          padding: 2rpx;
          padding-right: 18rpx;
          border-radius: 22rpx;
          image {
            width: 37rpx;
            height: 37rpx;
          }
          text {
            font-size: 23rpx;
            font-weight: 400;
            margin-left: 14rpx;
            color: #0295fa;
          }
        }
      }
      .btn {
        height: 72rpx;
        width: 100%;
        border-radius: 36rpx;
        background: linear-gradient(91deg, #ff9c56 0%, #ff6a00 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 28rpx;
        font-weight: 400;
        margin-top: 14rpx;
      }
      .base-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 14rpx;
        border-top: 1px dotted #B5B5B5;
        padding: 24rpx 0;
        .left-avatar {
          display: flex;
          align-items: center;
          margin-right: 10rpx;
          flex: 1;
          .avatar-w {
            margin-right: 22rpx;
            position: relative;
            height: 80rpx;
            top: -6rpx;
            .avatar {
              width: 65rpx;
              height: 65rpx;
              padding: 2rpx;
              background: #fff;
              border-radius: 10rpx;
              overflow: hidden;
              transform: rotate(-15deg);
              position: relative;
              top: 10rpx;
              border: 3rpx solid #fff;
              image {
                width: 100%;
                height: 100%;
                border-radius: 18rpx;
              }
            }
            .country {
              box-sizing: border-box;
              padding: 2rpx;
              background: #fff;
              border-radius: 8rpx;
              display: inline-block;
              position: absolute;
              bottom: -4rpx;
              left: 4rpx;
              border: 5rpx solid #fff;
              image {
                border-radius: 4rpx;
                width: 59rpx;
                height: 22rpx;
                display: block;
              }
            }
          }
          .desc-avatar {
            margin-left: 8rpx;
            .name {
              color: #262728;
              font-size: 28rpx;
              font-weight: 500;
              margin-bottom: 4rpx;
            }
            .vip-leval {
              display: inline-flex;
              align-items: center;
              border-radius: 19rpx;
              height: 40rpx;
              background: linear-gradient(118deg, #b9e2ff 4.79%, #0295fa 66.63%);
              padding: 0 18rpx 4rpx 4rpx;
              text {
                color: #fff;
                font-size: 22rpx;
                font-weight: 500;
                position: relative;
                top: 4rpx;
                font-style: italic;
              }
              .circle {
                width: 32rpx;
                height: 32rpx;
                border-radius: 50%;
                background-color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 5rpx;
                position: relative;
                top: 2rpx;
                image {
                  width: 20rpx;
                  height: 20rpx;
                }
              }
            }
          }
        }
        .right-numwrap {
          display: flex;
          align-items: center;
          .li {
            margin-left: 30rpx;
            &:first-child {
              margin-left: 0;
            }
            text-align: center;
            .txt {
              color: #606366;
              font-size: 26rpx;
              font-weight: 400;
              margin-bottom: 8rpx;
              white-space: nowrap;
            }
            .num {
              color: #262728;
              font-size: 26rpx;
              font-weight: 500;
            }
          }
        }
      }
    }
  }
}

// tab切换
.tab-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  padding-left: 26rpx;
  margin-top: 24rpx;
  .tab {
    color: #262728;
    font-size: 30rpx;
    font-weight: 500;
    margin-right: 48rpx;
    display: flex;
    align-items: center;
    position: relative;
    &.active {
      color: #278AFF;
      font-size: 30rpx;
      font-weight: 500;
    }
 
  }
}
